<template>
  <div class="page">
    <el-dialog title="下发数据" :visible.sync="dialogVisible" width="400px">
      <div v-for="item in datalist" :key="item">
        <span>{{ item }}</span>
        <el-button @click="openSms(item)">发送短信</el-button>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="提交审核" :visible.sync="dialogVisible2" width="400px">
      <input
        type="file"
        id="imageFile"
        name="imageFile"
        accept="video/*"
        style="width: 200px"
        @change="uploadImage($event, item)"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="官方Q群" :visible.sync="dialogVisible3" width="400px">
      <img src="" alt="" />
    </el-dialog>
    <div class="user">
      <div class="user-box">
        <div class="user-img">
          <img src="../assets/user.png" alt="" />
        </div>
        <div class="info">
          <div>支付宝: {{ user.phone }}</div>
          <div>姓名: {{ user.pwd }}</div>
        </div>
      </div>
    </div>

    <div style="margin-top: 15px; margin-left: 15px">
      <el-date-picker
        v-model="date"
        type="date"
        placeholder="选择日期"
        @change="changeDate"
      >
      </el-date-picker>
    </div>

    <div class="system">
      <div class="li">
        <div class="li-label">
          <img src="../assets/ldang.png" alt="" />
        </div>
        <div class="li-txt">系统消息</div>
      </div>
      <div class="li">
        <div class="li-label">
          <img src="../assets/gywm.png" alt="" />
        </div>
        <div class="li-txt">关于我们</div>
      </div>
      <div class="li" @click="dialogVisible3 = true">
        <div class="li-label">
          <img src="../assets/ewm.png" alt="" />
        </div>
        <div class="li-txt">官方Q群</div>
      </div>
    </div>
    <div class="list">
      <div class="title flex-space-between">
        <span>提交记录:</span>
        <div class="flex-space-between">
          <div class="li-info flex-space-between">
            <div class="li-label">提交总数:</div>
            <div class="li-txt" style="color: #029e17">{{ allcount }}</div>
          </div>
          <div class="li-info flex-space-between" style="margin-left: 20px">
            <div class="li-label">通过数量:</div>
            <div class="li-txt" style="color: #029e17">{{ scount }}</div>
          </div>
        </div>
      </div>
      <div class="li" v-for="item in tableData" :key="item._id">
        <div class="li-info">
          <div class="li-label">提交账号:</div>
          <div class="li-txt">{{ item.msg }}</div>
        </div>
        <div class="li-info">
          <div class="li-label">提交时间:</div>
          <div class="li-txt">{{ pTime(item.create_time) }}</div>
        </div>

        <div class="li-info">
          <div class="li-label">任务状态:</div>
          <div class="li-txt">
            <el-button size="small" type="success" v-if="item.status == 3"
              >审核通过</el-button
            >

            <el-button size="small" type="info" v-else-if="item.status == 1"
              >待审核</el-button
            >
            <el-button size="small" type="danger" v-else>审核失败</el-button>
          </div>
        </div>

        <div class="li-info" v-if="item.status == 4">
          <div class="li-label">失败原因</div>
          <div class="li-txt">{{ item.datalist }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import comm from "@/mixins/comm.js";
import { Loading } from "element-ui";

export default {
  mixins: [comm],
  data() {
    return {
      formData: {},
      tableData: [],
      user: {},
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      datalist: [],
      date: new Date(),
      scount: 0,
      allcount: 0,
    };
  },
  async created() {
    this.user = JSON.parse(localStorage.getItem("pandaSms_user"));
    console.log(this.user);
    this.phone = this.user.phone;
    this.getList(
      `${this.date.getFullYear()}-${
        this.date.getMonth() + 1
      }-${this.date.getDate()}`
    );
  },
  // components: { DatePicker },
  methods: {
    changeDate(e) {
      this.getList(`${e.getFullYear()}-${e.getMonth() + 1}-${e.getDate()}`);
    },
    openSms(item) {
      if (item) {
        const [_, phone] = item.split("-");
        console.log(_);
        const number = phone;
        const content = this.sms;
        const smsUrl = `sms:${number}?body=${content}`;

        window.open(smsUrl);
      } else {
        window.alert(item.datalist);
      }
    },
    pTime(d) {
      const currentDate = new Date(d);
      const year = currentDate.getFullYear(); // 例如：2025

      // 获取月份（注意：月份是从 0 开始的，0 表示 1 月）
      const month = currentDate.getMonth() + 1; // 例如：3（表示 4 月）

      // 获取日期（1 到 31）
      const day = currentDate.getDate(); // 例如：11

      // 拼接成“年月日”格式
      const formattedDate = `${year}-${String(month).padStart(2, "0")}-${String(
        day
      ).padStart(
        2,
        "0"
      )} ${currentDate.getHours()}:${currentDate.getMinutes()}`;

      return formattedDate;
    },
    submit(item) {
      this.dialogVisible2 = true;
      this.changeItem = item;
      this.checkmp4 = "";
    },
    uploadImage(e) {
      const file = e.target.files[0];
      const formData = new FormData();
      formData.append("files", file);

      // 打开 Loading
      const loading = Loading.service({
        lock: true, // 锁定屏幕
        text: "视频上传中...", // 加载文案
        background: "rgba(0, 0, 0, 0.7)", // 背景颜色
      });

      this.$sdk
        .post("/upload", formData, {})
        .then((res2) => {
          this.fullscreenLoading = false;
          const res = res2.data;
          loading.close();

          if (!res.code) {
            this.checkmp4 = res.img;
            this.$message("上传图片成功");
          } else {
            this.$message("上传图片失败");
          }
        })
        .catch(function (error) {
          this.fullscreenLoading = false;
          alert(error);
        });
    },
    getList(time) {
      this.$sdk
        .post("http://120.77.9.174/users/getsmsorder", {
          date: time,
        })
        .then((res2) => {
          console.log(res2);
          if (res2.data && !res2.data.code) {
            const data = res2.data.data.filter(e => e.phone == this.phone);
            const aList = [];
            const bList = [];
            data.forEach((e) => {
              if (e.status == 1) {
                aList.push(e);
              } else {
                bList.push(e);
              }
            });
            this.tableData = [...aList, ...bList];
            this.allcount = this.tableData.length;
            this.scount = this.tableData.filter((e) => e.status == 3).length;
          }
        })
        .catch(function (error) {
          alert(error);
        });
    },
    sendsms(item) {
      const data = item.datalist.split(",");
      this.sms = item.sms;
      this.datalist = data;
      this.dialogVisible = true;
    },
    submitForm() {
      if (this.checkmp4 && this.changeItem) {
        const a = this.$sdk.post(
          "/changesmsorder",
          {
            id: this.changeItem.id,
            key: "status",
            val: "2",
          },
          {}
        );
        const b = this.$sdk.post(
          "/changesmsorder",
          {
            id: this.changeItem.id,
            key: "checkmp4",
            val: this.checkmp4,
          },
          {}
        );

        Promise.all([a, b]).then((...res) => {
          console.log(res);
          this.dialogVisible2 = false;
          this.getList();
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.user {
  width: 100%;
  height: 150px;
  background-image: url("../assets/bj.png");
  background-size: 100% 100%;
  overflow: hidden;
  .user-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .user-box {
    display: flex;
    align-items: center;
    color: #fff;
    margin-top: 40px;
    margin-left: 20px;
    .info {
      margin-left: 10px;
      font-size: 14px;
    }
  }
}
.system {
  background: #fff;
  margin: 20px auto;
  width: 95%;
  border-radius: 15px;
  padding: 20px;
  display: flex;
  justify-content: space-around;
  img {
    width: 30px;
  }
  .li {
    text-align: center;
    color: #4e4e4e;
    font-size: 15px;
  }
}
</style>
